<template>
  <a-page-header>
    <a-card>
      <div class="table-page-search-wrapper">
      <a-button type="dashed" @click="refresh()">刷新列表</a-button>
      <a-button style="margin-left:5px " type="primary" @click="refreshCache()">清除后台缓存</a-button>

      <a-table :columns="columns" :loading="loading" :data-source="fileList" :rowKey="record => record.id" >

        <template #type="type">
          <a-tag v-if="type==='dir'" color="green">
            文件夹
          </a-tag>
          <a-tag v-else color="volcano">
            文件
          </a-tag>
        </template>

        <template #action="record">
          <a-button v-if="record.type==='file'" type="primary" ghost  @click="player(record)">播放</a-button>
        </template>

      </a-table>

      </div>
    </a-card>
  </a-page-header>
</template>

<script>
// @ is an alias to /src
import store from '@/store/index'
import {deleteCache} from "@/api/system";
const columns = [
  {
    title: '文件名称',
    dataIndex: 'name',
    key: 'name',

  },
  {
    title: '文件大小',
    dataIndex: 'size',
    key: 'size',
  },

  {
    title: '文件类型',
    dataIndex: 'type',
    key: 'type',
    scopedSlots: { customRender: 'type' },
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
  },
];
export default {
  name: 'PlayerIndex',
  components: {

  },
  mounted() {
    this.loading = true
    store.dispatch('GetFolderList').then(res=>{
      console.log(res)
      this.fileList = res.data
    }).finally(()=>{
      this.loading = false
    })
  },
  data(){
    return {
      loading:false,
      columns,
      fileList:[],
      showList:[]
    }
  },
  methods:{
    setData(data){
      console.log(data)
      this.fileList = data

    },
    refresh(){
      this.$store.commit('setPlayerIsGetInfo')
      location.reload()
    },
    refreshCache(){
      deleteCache().then(res=>{
        this.$message.info(res.data);
      })
    },
    player(record){
      console.log(record);
      sessionStorage.setItem("path",record.code)
      this.$router.push("/index/video")
    }
  }
}
</script>

<style>
#layout,#main{
  height: 100%;
}
</style>
